<template>
	<el-form v-bind="$attrs" :model="model" :rules="rules" :validate-on-rule-change="false">
		<el-form-item 
		:label="item.label"
		:prop="item.prop"
		v-for="(item,index) in options" 
		:key="index">
			<component :is="`el-${item.type}`" v-model="model[item.prop!]" v-bind="item.attrs">
				
			</component>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
	import {ref,defineProps, type PropType, onMounted} from 'vue'
	import type { FormOptions } from './types/type';
	// 引入lodash工具类,需要提前安装
	import cloneDeep from 'lodash/cloneDeep'
	let model=ref<any>({})
	let rules=ref<any>({})
	let props=defineProps({
		options:{
			type:Array as PropType<FormOptions[]>,
			required:true
		}
	})
	onMounted(()=>{
		let m:any={}
		let r:any={}
		props.options.map((item:FormOptions)=>{
			// console.log(item.prop)
			m[item.prop!]=item.value
			r[item.prop!]=item.rules
			
		} )
		model.value=cloneDeep(m)
		rules.value=cloneDeep(r)
		console.log(model.value)
		console.log(rules.value)
	})
</script>

<style scoped lang="scss">
</style>